<template>
  <div class="goods-list">
    <!-- 一个商品盒子 -->
    <div class="goods-item" v-for="item in GoodsList" :key="item.id">
      <router-link :to="{name:'GoodInfo',params:{id:item.id}}">
        <img :src="item.image">
        <h1 class="title">{{ item.name }}</h1>
        <p class="info">
          <span class="price">¥{{ item.price }}</span>
          <span class="sell">剩余 {{ item.num }} 件</span>
        </p>
      </router-link>
    </div>
    <mt-button class="more" v-if="GoodsList.length > 0?true:false" @click="getmore()">更多</mt-button>
    <!--  -->
  </div>
</template>

<script>
export default {
  props: ['category_id'],
  created () {
    this.getGoodList()
  },
  data () {
    return {
      GoodsList: [],
      last_id: 0
    }
  },
  methods: {

    getGoodList () {
      console.log(this.category_id)
      this.$indicator.open({ text: '加载中..' })
      const params = { category_id: this.category_id, last_id: this.last_id }
      this.$http.get('goodslist', { params: params }).then(res => {
        this.$indicator.close()
        if (res.data.code === 0) {
          this.$toast(res.data.msg)
        } else {
          // 有商品列表
          // 这个id有数据
          // this.last_id = this.GoodsList[this.GoodsList.length - 1].id
          if (res.data.data.length > 0) {
            // 请求成功后修改最后的商品id
            this.$toast(res.data.msg)
            this.GoodsList = this.GoodsList.concat(res.data.data)
            this.last_id = res.data.data[res.data.data.length - 1].id
            // console.log(this.last_id)
          } else if (this.GoodsList.length > 0) {
            this.$toast('到达底部')
          } else {
            this.$toast(res.data.msg)
            // 这个id无数据
            console.log('无数据')
          }
        }
      })
    },
    getmore () {
      this.getGoodList()
    }
  }
}
</script>
<style lang="scss" scoped>
.more {
  margin: 20px 0 20px;
  height: 50px;
  text-align: center;
  width: 98%;
}
.goods-list {
  display: flex;
  flex-flow: row wrap;
  padding-left: 10px;
  .goods-item {
    width: 47%;
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      .price {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .sell {
        font-size: 13px;
      }
    }
  }
}
</style>
